<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<!--/meta 作为公共模版分离出去-->

	<title>区域图 - 系统统计 - h-ui.admin.pro v1.0</title>
	<meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
	<meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
	<div class="wap-container">
		<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
			首页
			<span class="c-gray en">/</span>
			系统统计
			<span class="c-gray en">/</span>
			区域图
			<a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<article class="Hui-admin-content clearfix">
			<div class="panel">
				<div class="panel-body">
					<div class="row">
						<div class="col-sm-12">
							<div class="panel">
								<div class="panel-header">
									地图
								</div>
								<div class="panel-body">
									<div id="echarts-1" style="height:520px"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<article>
	</div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
	<!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/echarts/4.1.0.rc2/echarts.min.js"></script>
	<script type="text/javascript" src="lib/echarts/4.1.0.rc2/china.js"></script>
  <script type="text/javascript" src="lib/echarts/4.1.0.rc2/all-province.js"></script>
	<script type="text/javascript">
		var chinaData = [
			{name: '北京',value: 1000},
			{name: '天津',value: 890},
			{name: '上海',value: 800},
			{name: '重庆',value: 500},
			{name: '河北',value: 300},
			{name: '河南',value: 400},
			{name: '云南',value: 358},
			{name: '辽宁',value: 0},
			{name: '黑龙江',value: 0},
			{name: '湖南',value: 0},
			{name: '安徽',value: 10},
			{name: '山东',value: 35},
			{name: '新疆',value: 20},
			{name: '江苏',value: 55},
			{name: '浙江',value: 66},
			{name: '江西',value: 77},
			{name: '湖北',value: 88},
			{name: '广西',value: 99},
			{name: '甘肃',value: 44},
			{name: '山西',value: 55},
			{name: '内蒙古',value: 43},
			{name: '陕西',value: 67},
			{name: '吉林',value: 68},
			{name: '福建',value: 87},
			{name: '贵州',value: 56},
			{name: '广东',value: 97},
			{name: '青海',value: 38},
			{name: '西藏',value: 900},
			{name: '四川',value: 2},
			{name: '宁夏',value: 55},
			{name: '海南',value: 66},
			{name: '台湾',value: 33},
			{name: '香港',value: 44},
			{name: '澳门',value: 77}
		];
		function changeMap(){
			var myChart= echarts.init(document.getElementById('echarts-1'));
				option = {
					title: {
						show: false
					},
					tooltip: {
						trigger: 'item',
					},
					legend: {
						left: 'left',
						data: ['强'],
						textStyle: {
							color: '#ccc'
						}
					},
					dataRange: {
						min: 0,
						max: 1000,
						x: 'left',
						y: 'bottom',
						text:['高','低'],
						calculable : true,
						color: ["#1890ff","#e2fbfe"]
					},
					toolbox: {
						show: false,
						orient : 'vertical',
						x: 'right',
						y: 'center',
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					series: [
						{
							name: '中国',
							type: 'map',
							mapType: 'china',
							selectedMode : 'single',
							label: {
								normal: {
									show: true
								},
								emphasis: {
									show: true,
									itemStyle: {
										areaColor: '#296fd6',
									}
								}
							},
							data: chinaData,
						}
					]
				};
				myChart.setOption(option);
				window.addEventListener("resize",function(){
					myChart.resize();
				});
			}
	$(function () {
		changeMap();
	});
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
